<!DOCTYPE html>
<html>
<head>
    <title>Spring AI 流式对话</title>
    <meta charset="UTF-8">
    <style>
        .chat-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        #chat-history {
            height: 500px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            overflow-y: auto;
            margin-bottom: 20px;
        }

        .message {
            margin: 10px 0;
            padding: 10px;
            border-radius: 15px;
            max-width: 80%;
        }

        .user-message {
            background: #e3f2fd;
            margin-left: auto;
        }

        .ai-message {
            background: #f5f5f5;
            position: relative;
        }

        .typing-indicator {
            display: inline-block;
            width: 8px;
            height: 1em;
            background: #666;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            50% { opacity: 0; }
        }

        #input-area {
            display: flex;
            gap: 10px;
        }

        #question-input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 16px;
        }

        button {
            padding: 12px 24px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="chat-container">
    <div id="chat-history"></div>
    <div id="input-area">
        <input type="text" id="question-input" placeholder="输入您的问题...">
        <button onclick="startStreaming()">发送</button>
    </div>
</div>

<script>
    let eventSource = null;
    let currentAiMessage = null;

    function appendMessage(content, isUser) {
        const history = document.getElementById('chat-history');
        const msgDiv = document.createElement('div');
        msgDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
        msgDiv.innerHTML = content.replace(/\n/g, '<br>');
        history.appendChild(msgDiv);
        history.scrollTop = history.scrollHeight;
        return msgDiv;
    }

    function startStreaming() {
        const question = document.getElementById('question-input').value.trim();
        if (!question) return;

        // 清除旧连接
        if (eventSource) {
            eventSource.close();
            removeTypingIndicator();
        }

        // 添加用户消息
        appendMessage(question, true);
        document.getElementById('question-input').value = '';

        // 创建AI消息容器
        currentAiMessage = appendMessage('', false);
        currentAiMessage.innerHTML = '<div class="typing-indicator"></div>';

        // 建立SSE连接
        eventSource = new EventSource(`/ai/content/get/stream?question=${encodeURIComponent(question)}`);

        eventSource.onmessage = (event) => {
            removeTypingIndicator();
            currentAiMessage.innerHTML += event.data.replace(/\n/g, '<br>');
            currentAiMessage.scrollIntoView({ behavior: 'smooth' });
        };

        eventSource.onerror = () => {
            removeTypingIndicator();
            eventSource.close();
        };
    }

    function removeTypingIndicator() {
        const indicators = document.getElementsByClassName('typing-indicator');
        while(indicators.length > 0) {
            indicators[0].remove();
        }
    }

    // 支持回车发送
    document.getElementById('question-input').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') startStreaming();
    });
</script>
</body>
</html>